<template>
    <div class="layoutContainer">
        <div class="left" ref="left">
            <Aside></Aside>
        </div>
        <div class="right" ref="right">
            <div class="top">
                <Top :left="left" :right="right"></Top>
            </div>
            <div class="main">
                <router-view></router-view>
            </div>
        </div>
    </div>
  </template>

<script setup>
import Top from '../components/top.vue';
import Aside from '../components/aside.vue';
import { ref } from 'vue';
let left=ref()
let right=ref()
</script>

<style lang="less" scoped>
.layoutContainer{
    height: 100%;
    display: flex;
    flex-direction: row;
    transition: all 0.5s linear;
}
.left{
    flex:1;
    height:100%
}
.right{
    flex:6;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.top{
    flex:1;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px;
}
.main{
    flex:20;
    width: 100%;
    background-color: #f5f5f5;
}
</style>